<div class="d-flex">
        <h4 *ngIf="displayTitle" class="mr-auto">Explore {{ elementCount | number }} Companies</h4>
        <sustainalytics-pagination #pagination *ngIf="elementCount > 0 && (paginationPositionDisplay == checkPagination.UpAndDown || paginationPositionDisplay == checkPagination.Up)"
            (changed)="pageChanged($event)" [elemCount]="elementCount" [stateChanged]="paginationStateChanged" class="ml-auto"></sustainalytics-pagination>
    </div>
    <div *ngIf="sourceTransformed" class="d-flex">
        <!-- FIXED -->
        <div *ngIf="fixedColumns && fixedColumns.length > 0" [ngClass]="{'col-md-12': !hasNonFixedCols, 'col-md-7': hasNonFixedCols}"s>
            <div class="d-flex align-items-end row flex-nowrap table-header-row col-md-12">
                <div *ngFor="let column of fixedColumns"
                    [ngClass]="column.value.sizeClass">
                    <column-header [options]="column.value" (onChanged)="search($event)"></column-header>
                </div>
            </div>
    
            <div *ngFor="let item of sourceTransformed" class="cardStart card-body shadow mb-3" [ngStyle]="{'height': (rowHeight > 0 ? (rowHeight + 'px'): 'auto')}"
                style="flex-direction: unset!important;">
                <div *ngFor="let column of fixedColumns; let index = index;" [ngClass]="column.value.sizeClass" class="cellValue">                    
                    <cell *ngIf="elementCount > 0" [options]="column.value" [value]="item[column.index]" (buttonClicked)="onButtonClicked($event)"></cell>
                    <label *ngIf="elementCount == 0 && index == 0" style="margin: 0px">No available data</label>
                </div>
            </div>
    
        </div>
        <!-- NOT FIXED  -->
        <div *ngIf="dynamicColumns && dynamicColumns.length > 0" class="row col-md-5"
            style="overflow-x: auto;padding:0px;">
            <div style="white-space: nowrap">
                <div #dynamicColContainer class="table-header-row">
                    <div *ngFor="let column of dynamicColumns" class="flexibleHeader">
                        <column-header [options]="column.value" (onChanged)="search($event)"></column-header>
                    </div>
                </div>
                <div *ngFor="let item of sourceTransformed" class="cardEnd card-body shadow mb-3"  [ngStyle]="{'height': (rowHeight > 0 ? (rowHeight + 'px'): 'auto')}">
                    <div *ngFor="let column of dynamicColumns" class="flexibleCell">
                        <cell *ngIf="elementCount > 0" [options]="column.value" [value]="item[column.index]" (buttonClicked)="onButtonClicked($event)" class="cellValue"></cell>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- PAGINATION -->
    <div class="d-flex">
        <sustainalytics-pagination #pagination *ngIf="elementCount > 0 && showPagination && (paginationPositionDisplay == checkPagination.UpAndDown || paginationPositionDisplay == checkPagination.Down)"
            (changed)="pageChanged($event)" [elemCount]="elementCount" [stateChanged]="paginationStateChanged" class="ml-auto mt-3"></sustainalytics-pagination>
    </div>